<template>
    <div :style="styleColor">
        <div class="top">
            <div class="left">
                <img class="imgOne" src="@/assets/images/bigViewIMG/blue.png" alt="">
                <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
                <span>AEO企业降级</span>
            </div>
            <div class="right" @click="jump">
                <span>更多</span><i class="el-icon-d-arrow-right"></i>
            </div>

        </div>
       
        <div class="bottom">
            <table border="0" cellspacing="0" cellpadding="0">
            
                <colgroup>
                    <col width="30%">
                    <col width="40%">
                    <col width="30%">
                </colgroup>
                <thead>
                    <th class="th1">预警类型</th>
                    <th class="th2">提示信息</th>
                    <th class="th3">预警时间</th>
                </thead>
            </table>
            <div class="main" v-loading="loading">
                <vue-seamless-scroll :data="testArray" :class-option="optionHover" class="seamless-warp" v-if="testArray[0]">
                    <ul>
                        <li v-for="item in testArray" class="liStyle" :key="item.age">
                            <span class="title1 text_align">{{ item.promptType }}</span>
                            <el-tooltip class="item" effect="dark" :content="item.dsrWarning" placement="top">
                                <span class="title2 text_align">{{ item.dsrWarning }}</span>
                            </el-tooltip>
            
                            <span class="title3 text_align">{{ item.warningTime }}</span>
                        </li>
                    </ul>
                </vue-seamless-scroll>
                <div class="error" v-if="showError">
                    查无数据
                </div>
            </div>
        </div>
        <!-- AEO企业降级 -->
    </div>
</template>

<script>
import { reqEnterpriseDemotion } from '@/api/home/index.js'
import { mapGetters } from 'vuex'
export default {
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    },
    data() {
        return {
            loading:false,
            showError:false,
            options: {},
            testArray: [
                // { alertType: '行政处罚', promptMsg: '上海国贸科技有限公司ssssss', warningTime: '2022-10-10 16:20:30' },
                // { alertType: '行政处罚', promptMsg: '上海国贸科技有限公司ssssss', warningTime: '2022-10-10 16:20:30' },
                // { alertType: '行政处罚', promptMsg: '上海国贸科技有限公司ssssss', warningTime: '2022-10-10 16:20:30' },
                // { alertType: '行政处罚', promptMsg: '上海国贸科技有限公司ssssss', warningTime: '2022-10-10 16:20:30' },
                // { alertType: '行政处罚', promptMsg: '上海国贸科技有限公司ssssss', warningTime: '2022-10-10 16:20:30' },
                // { alertType: '行政处罚', promptMsg: '上海国贸科技有限公司ssssss', warningTime: '2022-10-10 16:20:30' },
                // { alertType: '行政处罚', promptMsg: '上海国贸科技有限公司ssssss', warningTime: '2022-10-10 16:20:30' }
            ],

        }
    },
    computed: {
        ...mapGetters(['customCode']),
        //滚动表格的配置项
        optionHover() {
            return {
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                step: 0.3,// 数值越大速度滚动越快
                openWatch: true, // 开启数据实时监控刷新dom
                // limitMoveNum: 5, //开始滚动的数据量
                // singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                // singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                // waitTime: 1000 //单步运动停止的时间(默认值1000ms)
            }
        },

        transStyle() {
         
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static",

                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                // right: this.transStyle.right + "px"

            }
        }
    },
    created() {
        if (this.customCode == '' || !this.customCode) {
            // 默认22 上海海关
            this.getList('22')
        } else {
            // 有数据就用store里面的数据
            this.getList(this.customCode)
        }
    },
    watch: {
        customCode(val) {
   
            this.getList(val)

        }
    },
    mounted() {
        this.options = this.value
    },
    methods:{
        jump(){
            this.$router.push('/visual/AEOEnterpriseRelegation')
            // this.$store.commit('homeStatus/changeAEODialogShow',true)
        },
        async getList(val){
            this.loading=true
            const res = await reqEnterpriseDemotion({ customsCode: val })
            this.loading=false
            if(res.data.length<1||!res.data) {
                this.showError=true
                this.testArray=[]
            }else {
                this.testArray = res.data
            }

        }
    }
}
</script>

<style lang='scss' scoped>
* {
    margin: 0;
    padding: 0;
    /*font-weight: normal;*/
}

ul {
    list-style: none;
}

table {
    width: 100%;
    text-align: center;
    
}
thead {
    border-radius: 10px;
}
th {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    background-color: rgba(113, 169, 218, 0.5);
    
    color: #fff;
    
}

.top {
    height: 40px;
    display: flex;
    .left {
            width: 420px;
            display: flex;
            align-items: center;
    
            .imgOne {
                width: 35px;
                height: 40px;
            }
    
            .imgTwo {
                width: 22px;
                height: 21px;
                margin-left: 10px;
            }
    
            span {
                color: #fff;
                font-size: 16px;
                margin-left: 8px;
            }
        }
        .right {
             flex: 1;
             display: flex;
            //  align-items: center;
            //  justify-content: center;
             color: rgba(255, 255, 255, 0.53);
            cursor: pointer;
            span {
                font-size: 16px;
                line-height: 40px;
            }
            i {
                margin-left: 5px;
                font-size: 18px;
                line-height: 40px;
            }
         }
}
.bottom {
    height: 185px;
}
.th1 {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.th3 {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.seamless-warp {
    height: 155px;
    overflow: hidden;

    .liStyle {
        height: 30px;
        line-height: 30px;
        background-color: rgba(11, 130, 235, 0.2);
        margin-top: 5px;
        width: 100%;
        display: flex; //设置flex布局，否则span标签无法设置宽度
        color: #fff;
        text-align: center;
        border-radius: 5px;
      
        //设置宽度与表头列宽一致
        .title1 {
            font-size: 12px;
            width: 30%;
            // border-top-left-radius: 5px;
            //     border-bottom-left-radius: 5px;
            white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
        }

        .title2 {
            font-size: 12px;
            width: 40%;
            white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
        }
        .title3 {
            font-size: 12px;
            width: 30%;
            // border-top-right-radius: 5px;
            //     border-bottom-right-radius: 5px;
            white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            
        }
        .text_align {
            text-align: center;
        }
    }
}
.error {
    color: #9d9d9d;
    line-height: 115px;
    font-size: 25px;
    font-weight: 700;

}
.main {
    height: 155px;
    ::v-deep .el-loading-mask {
            background-color: rgba(255, 255, 255, 0);

         
                        .el-loading-spinner .circular {
                            width: 30px;
                            height: 30px;
                        }
            .el-loading-spinner .path {
                stroke: #c23531;
                stroke-width: 8px;
            }
        }
}
</style>
